<template>
    <CommonCard title="今日用户交易数" :value="30">
        <template #default>
            <v-chart :option="option"></v-chart>
        </template>
        <template #footer>
            <span>退货率</span>
            <span class="css-1">3.57%</span>
        </template>
    </CommonCard>
</template>

<script setup>
import CommonCard from './CommonCard.vue';
import { ref } from 'vue';

const option = ref({
    xAxis: {
        type: 'category',
        data: ['0:00', '3:00', '5:00', '7:00', '9:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],
        show: false,
        // boundaryGap: false
    },
    yAxis: {
        type: 'value',
        show: false
    },
    grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    tooltip: {
    },

    series: [{
        name: '实时交易数',
        data: [120, 200, 150, 80, 70, 110, 130, 100, 120, 150, 100, 120],
        type: 'bar',
        barWidth: '60%',
    }]
})

</script>

<style lang="scss" scoped>

</style>